import {
  Component,
  ViewChild,
  Renderer2,
  ViewContainerRef,
  ComponentFactoryResolver,
  ComponentFactory,
  Form
} from '@angular/core';
// import { ComponentFactoryResolver } from '@angular/core/src/render3';
import { D1Component } from './d1/d1.component';
import { D2Component } from './d2/d2.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-base';
  private aa = 1;
  private bb = 10;
  private stop;

  @ViewChild('container', { read: ViewContainerRef })
  container: ViewContainerRef;
  constructor(
    private render: Renderer2,
    private resolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    let div = this.render.selectRootElement('#domdiv');
    //div.innerHTML = '<b>button111</b>';
    let btn = this.render.createElement('input');
    btn.type = 'button';
    btn.value = '按钮';
    btn.id = 'abc';
    div.appendChild(btn);
    this.stop = this.render.listen(btn, 'click', event => {
      this.dian(event);
    });
  }

  create1() {
    this.container.clear();
    const d1: ComponentFactory<
      D1Component
    > = this.resolver.resolveComponentFactory(D1Component);
    this.container.createComponent(d1);
  }

  create2() {
    this.container.clear();
    const d2: ComponentFactory<
      D1Component
    > = this.resolver.resolveComponentFactory(D2Component);
    this.container.createComponent(d2);
  }
  dian(evt) {
    alert('点' + evt.currentTarget.id);
    this.stop();
  }

  @ViewChild('head') header; //父调子 app-student #head
  callFather(evt: any) {
    console.log('father is id ' + evt);
  }
  callChild() {
    let sw = 'callChild data';
    this.header.callFun(sw);
  }
  addAA() {
    this.aa++;
  }
  addBB() {
    this.bb++;
  }

  onSubmit(foreValue) {
    console.log(foreValue);
    console.log(foreValue.email);
  }
}
